<template>
  <dv-border-box-7  :color="['#084FA0','#06073B']" >
    <div class="container">
      <div class="title_container">
        <span  class="title"></span>
        <span style="margin-left: 10px;font-size: 22px"> 服务工单</span>
        <div style="margin-left: 100px;display: flex;align-items: center" class="tab">
           <el-radio-group v-model="tabPosition" style="margin-bottom: 30px">
<!--            <el-radio-button label="day">本日</el-radio-button>-->
            <el-radio-button label="month">本月</el-radio-button>
            <el-radio-button label="year">本年</el-radio-button>
          </el-radio-group>
        </div>
      </div>
        <div style="margin-top: 50px">
          <el-row>
            <el-col :span="11">
              <div class="work" ref="work" style="width: 100%; height: 300px"></div>
            </el-col>
            <el-col :span="13">
              <div class="order" ref="order" style="width: 100%; height: 300px"></div>
            </el-col>
          </el-row>
        </div>
    </div>
  </dv-border-box-7>
</template>
 <script>
 import * as echarts from 'echarts'
 let chart = null
 let orderChart=null
 export default {
   data() {
     return{
       tabPosition:'year',
       timer:null
     }
   },
   mounted() {
     // setInterval(this.changeTab(),5000)
     chart = echarts.init(this.$refs.work)
     orderChart=echarts.init(this.$refs.order)
      this.changeTab()

       this.setOptions()
       this.orderOptions()

   },
   methods:{
     changeTab(){
       console.log('this.tabPosition',this.tabPosition)
       let that=this
       this.timer = setInterval(()=>{
         if(that.tabPosition=='month'){
           that.tabPosition='year'
           this.setOptions()
           this.orderOptions()
         }
           else {
           that.tabPosition='month'
           this.setOptions()
           this.orderOptions()
         }
       },3000)

     },
     setOptions() {
       let total=0
       let tableData=[]
       let data= {
         "daily": {
         "total": 422,
             "data": [
           {
             "service_type": "助洁",
             "number": "398",
             "percent": "94.31%"
           },
           {
             "service_type": "助餐",
             "number": "15",
             "percent": "3.55%"
           },
           {
             "service_type": "助医",
             "number": "1",
             "percent": "0.24%"
           },
           {
             "service_type": "助浴",
             "number": "3",
             "percent": "0.71%"
           },
           {
             "service_type": "护理",
             "number": "3",
             "percent": "0.71%"
           },

           {
             "service_type": "助行",
             "number": "2",
             "percent": "0.47%"
           }
         ]
       },
         "month": {
         "total": 200922,
             "data": [
           {
             "service_type": "助洁",
             "number": 142654,
             "percent": "71%"
           },
           {
             "service_type": "助餐",
             "number": 6831,
             "percent": "3.4%"
           },
           {
             "service_type": "助医",
             "number": 2090,
             "percent": "1.04%"
           },
           {
             "service_type": "助浴",
             "number": 2532,
             "percent": "1.26%"
           },
           {
             "service_type": "护理",
             "number": 42193,
             "percent": "21%"
           },
           {
             "service_type": "助行",
             "number": 4622,
             "percent": "2.3%"
           },

         ]
       },

         "year": {
         "total": 888997,
             "data":[
           {
             "service_type": "助洁",
             "number": 648967,
             "percent": "73%"
           },
           {
             "service_type": "助餐",
             "number": 19291,
             "percent": "2.17%"
           },
           {
             "service_type": "助医",
             "number": 4534,
             "percent": "0.51%"
           },
           {
             "service_type": "助浴",
             "number": 17602,
             "percent": "1.98%"
           },
           {
             "service_type": "护理",
             "number": 177794,
             "percent": "20%"
           },

           {
             "service_type": "助行",
             "number": 20803,
             "percent": "2.34"
           }

         ]

       }

       }
       if(this.tabPosition=='day'){
           total=data.daily.total
           tableData=data.daily.data
       }else  if(this.tabPosition=='month'){
         total=data.month.total
         tableData=data.month.data
       }else {
         total=data.year.total
         tableData=data.year.data
       }

       let option = {
         title: {
           text: total,
           subtext: '总数（单）',
           textStyle: {
             color: '#f2f2f2',
             fontSize: 20,
             align: 'center',
             fontFamily:'sans-serif',
             lineHeight:10

           },
           subtextStyle: {
             fontSize: 12,
             color: 'rgba(79, 166, 247, 1)'
           },
           x: '58%',
           y: 'center',
         },
         // grid: {
         //   // left: '60%',
         // },
         tooltip: {
           trigger: 'item',
           backgroundColor: '#040737',
           borderColor: '#0E8BFF', // 设置边框颜色，这里是绿色
           borderWidth: 2, // 设置边框宽度，这里是2像素
           textStyle: { // 设置文本样式
             color: '#ffffff', // 设置文本颜色
             fontSize: 16 // 设置文本字体大小
           },
           formatter: function (params){
             console.log('22222222222222222222',params)
             return `
                <div> <span style="display: inline-block;width: 10px;height: 10px;"></span>${params.name}</div>
                <div> <span>占比:</span><span style="margin-left: 8px">${params.percent}%</span></div>
                 <div><span>数量:</span> <span style="margin-left: 8px">${params.value}单</span></div>
             `
           }
         },
         legend: {
           // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） | 'vertical'（垂直）
           orient: 'vertical',
           // x 设置水平安放位置，默认全图居中，可选值：'center' | 'left' | 'right' | {number}（x坐标，单位px）
           x: 10,
           // y 设置垂直安放位置，默认全图顶端，可选值：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
           y: 'center',
           itemWidth: 15,   // 设置图例图形的宽
           itemHeight: 15,  // 设置图例图形的高
           textStyle: {
             color: 'rgba(79, 166, 247, 1)'  // 图例文字颜色
           },
           // itemGap设置各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔
           itemGap: 15,
           data: ['助洁','助餐','助医','助浴','护理','助行'],

         },
         animationDuration: 1500,
         animationEasingUpdate: 'quinticInOut',
         series: [{
           name: '',
           type: 'pie',
           itemStyle: {
             // normal: {
             //   borderWidth: 3,
             //   borderColor: "#030d22"
             // },
             // emphasis: {
             //   shadowBlur: 10,
             //   shadowOffsetX:1 0,
             //   shadowColor: 'rgba(0, 0, 0, 0.5)'
             // },
             normal: {
               // borderColor: 'auto',
               // borderWidth: 2,
               // borderType: 'solid',
               borderRadius: [10, 10, 10, 10], // 分别对应左上、右上、右下、左下的圆角半径
             }
           },
           radius: ['55%', '65%'],
           center: ['65%', '50%'],
           hoverAnimation: true,
           // color: ['#c487ee', '#deb140', '#49dff0', '#034079', '#6f81da', '#00ffb4'],
           label: {
             // color: 'auto'
             normal:{
               formatter: function(params){
                 return params.percent+'%'
               }
             }
           },

           data: [
             { value: tableData[0].number, name: tableData[0].service_type ,
             label:{
               color:"rgba(13, 222, 156, 1)"
             },
             labelLine:{
               lineStyle:{
                 color:"rgba(13, 222, 156, 1)"
               }
             },
             itemStyle:{
               color: new echarts.graphic.LinearGradient(
                             1, 0, 0, 0,
                             [
                               {offset: 0, color: 'rgba(13, 222, 156, 1)'},
                               {offset: 1, color: 'rgba(21, 25, 82, 0.1)'}
                             ]
                         ),
               borderWidth: 20,
             }
             },
             { value: tableData[1].number, name: tableData[1].service_type ,
               label:{
                 color:"rgba(14, 139, 255, 1)"
               },
               labelLine:{
                 lineStyle:{
                   color:"rgba(14, 139, 255, 1)"
                 }
               },
               itemStyle:{
                 color: new echarts.graphic.LinearGradient(
                     1, 0, 0, 0,
                     [
                       {offset: 0, color: 'rgba(14, 139, 255, 1)'},
                       {offset: 1, color: 'rgba(21, 25, 82, 0.1)'}
                     ]
                 ),
                 borderWidth: 20,
               }
             },
             { value: tableData[2].number, name: tableData[2].service_type ,
               label:{
                 color:"rgba(135, 175, 41, 1)"
               },
               labelLine:{
                 lineStyle:{
                   color:"rgba(135, 175, 41, 1)"
                 }
               },
               itemStyle:{
                 color: new echarts.graphic.LinearGradient(
                     1, 0, 0, 0,
                     [
                       {offset: 0, color: 'rgba(135, 175, 41, 1)'},
                       {offset: 1, color: 'rgba(21, 25, 82, 0.1)'}
                     ]
                 ),
                 borderWidth: 20,
               }
             },
             { value: tableData[3].number, name: tableData[3].service_type ,
               label:{
                 color:"rgba(228, 196, 49, 1)"
               },
               labelLine:{
                 lineStyle:{
                   color:"rgba(228, 196, 49, 1)"
                 }
               },
               itemStyle:{
                 color: new echarts.graphic.LinearGradient(
                     1, 0, 0, 0,
                     [
                       {offset: 0, color: 'rgba(228, 196, 49, 1)'},
                       {offset: 1, color: 'rgba(21, 25, 82, 0.1)'}
                     ]
                 ),
                 borderWidth: 20,
               }
             },
             { value: tableData[4].number, name: tableData[4].service_type ,
               label:{
                 color:"rgba(251, 154, 68, 1)"
               },
               labelLine:{
                 lineStyle:{
                   color:"rgba(251, 154, 68, 1)"
                 }
               },
               itemStyle:{
                 color: new echarts.graphic.LinearGradient(
                     1, 0, 0, 0,
                     [
                       {offset: 0, color: 'rgba(251, 154, 68, 1)'},
                       {offset: 1, color: 'rgba(21, 25, 82, 0.1)'}
                     ]
                 ),
                 borderWidth: 20,
               }
             },
             { value: tableData[5].number, name: tableData[5].service_type ,
               label:{
                 color:"rgba(28, 219, 254, 1)"
               },
               labelLine:{
                 lineStyle:{
                   color:"rgba(28, 219, 254, 1)"
                 }
               },
               itemStyle:{
                 color: new echarts.graphic.LinearGradient(
                     1, 0, 0, 0,
                     [
                       {offset: 0, color: 'rgba(28, 219, 254, 1)'},
                       {offset: 1, color: 'rgba(21, 25, 82, 0.1)'}
                     ]
                 ),
                 borderWidth: 20,
               }
             },
           ]
         }]
       };

       chart.setOption(option)
     },
     orderOptions(){
         let data ={
           "daily": {
             "normal": [
               ["2023-08-03 01:30:00", 0],
               ["2023-08-03 04:30:00", 0],
               ["2023-08-03 07:30:00", 36],
               ["2023-08-03 10:30:00", 43],
               ["2023-08-03 13:30:00", 35],
               ["2023-08-03 16:30:00", 26],
               ["2023-08-03 19:30:00", 2],
               ["2023-08-03 22:30:00", 0]
             ],
             "abnormal": [
               ["2023-08-03 01:30:00", 0],
               ["2023-08-03 04:30:00", 0],
               ["2023-08-03 07:30:00", 0],
               ["2023-08-03 10:30:00", 0],
               ["2023-08-03 13:30:00", 0],
               ["2023-08-03 16:30:00", 0],
               ["2023-08-03 19:30:00", 0],
               ["2023-08-03 22:30:00", 0]
             ]
           },

           "month": {
             "normal": [
               ["2023-08-03 01:30:00", 0],
               ["2023-08-03 04:30:00", 0],
               ["2023-08-03 07:30:00", 258],
               ["2023-08-03 10:30:00", 317],
               ["2023-08-03 13:30:00", 249],
               ["2023-08-03 16:30:00", 234],
               ["2023-08-03 19:30:00", 10],
               ["2023-08-03 22:30:00", 0]

             ],
             "abnormal": [
               ["2023-08-03 01:30:00", 0],
               ["2023-08-03 04:30:00", 0],
               ["2023-08-03 07:30:00", 4],
               ["2023-08-03 10:30:00", 5],
               ["2023-08-03 13:30:00", 3],
               ["2023-08-03 16:30:00", 2],
               ["2023-08-03 19:30:00", 0],
               ["2023-08-03 22:30:00", 0]
             ]
           },

           "year": {
             "normal": [
               ["2023-08-03 01:30:00", 0],
               ["2023-08-03 04:30:00", 0],
               ["2023-08-03 07:30:00", 3096],
               ["2023-08-03 10:30:00", 3804],
               ["2023-08-03 13:30:00", 2988],
               ["2023-08-03 16:30:00", 2808],
               ["2023-08-03 19:30:00", 120],
               ["2023-08-03 22:30:00", 0]
             ],
             "abnormal": [
               ["2023-08-03 01:30:00", 0],
               ["2023-08-03 04:30:00", 0],
               ["2023-08-03 07:30:00", 4],
               ["2023-08-03 10:30:00", 5],
               ["2023-08-03 13:30:00", 3],
               ["2023-08-03 16:30:00", 2],
               ["2023-08-03 19:30:00", 0],
               ["2023-08-03 22:30:00", 0]
             ]
           }

         }

       let normal=[];
       let abnormal=[];

      if(this.tabPosition=='day'){
        normal=data.daily.normal
        abnormal=data.daily.abnormal
      }else  if(this.tabPosition=='month'){
        normal=data.month.normal
        abnormal=data.month.abnormal
      } else {
        normal=data.year.normal
        abnormal=data.year.abnormal
      }

    const Dataseries=[
      {
         name:'正常',
         data:normal ,
        // data:[["2023-09-07 08:31:00",72000], ["2023-09-07 09:31:00",84000],  ["2023-09-07 10:31:00",60000],  ["2023-09-07 11:31:00",30000],  ["2023-09-07 12:31:00",30000],  ["2023-09-07 13:31:00",90000], ["2023-09-07 14:31:00",90000], ["2023-09-07 15:31:00",54000], ["2023-09-07 16:31:00",30000]],
        type: 'line',
        color:'rgba(13, 222, 156, 1)',
        smooth:true,
        areaStyle: {
          normal: {

            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgba(13, 222, 156, 0.5)'
            }, {
              offset: 1,
              color: 'rgba(8, 79, 160, 0)'
            }], false),
            shadowColor: 'rgba(0, 0, 0, 0.1)',
            shadowBlur: 10
          }
        },
        symbol: 'circle',
        symbolSize: 5,
      },
      {
        name:'异常',
        data: abnormal ,
        // data: [["2023-09-07 08:31:00",86400], ["2023-09-07 09:31:00",100800],  ["2023-09-07 10:31:00",72000],  ["2023-09-07 11:31:00",36000],  ["2023-09-07 12:31:00",36000],  ["2023-09-07 13:31:00",100800], ["2023-09-07 14:31:00",100800], ["2023-09-07 15:31:00",64800], ["2023-09-07 16:31:00",36000]],
        type: 'line',
        color:'rgba(205, 173, 62)',
        smooth:true,
        areaStyle: {
          normal: {

            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgba(255, 215, 37, 0.3)'
            }, {
              offset: 0.8,
              color: 'rgba(8, 79, 160, 0)'
            }], false),
            shadowColor: 'rgba(0, 0, 0, 0.1)',
            shadowBlur: 10
          }
        },
        symbol: 'circle',
        symbolSize: 5,
      }
    ]

       const option = {

         tooltip: {
           trigger: 'axis',
           // axisPointer: { // 禁用轴线
           //   type: 'none',
           // },
           backgroundColor: '#040737',
           borderColor: '#0E8BFF', // 设置边框颜色，这里是绿色
           borderWidth: 2, // 设置边框宽度，这里是2像素
           textStyle: { // 设置文本样式
             color: '#ffffff', // 设置文本颜色
             fontSize: 16 // 设置文本字体大小
           },
           axisPointer: {            // 坐标轴指示器，坐标轴触发有效
             type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
           },
           formatter: function (params) {
             console.log('params',params)
             // if (!params[0].value[1]) return
             let name1 = params[0]?.seriesName
             let value1 = params[0]?.data[1]
             let name2 = params[1]?.seriesName
             let value2 = params[1]?.data[1]
             const point = params[0];
             const dataIndex = point.data[0];
             let left = new Date(dataIndex).getHours()
             let right = new Date(dataIndex).getHours() + 3>24? 24:new Date(dataIndex).getHours() + 3
             const timeRange = `${left}点-${right}点`;

             return `<div>${timeRange}</div>
                 <div><span style="display: inline-block;width: 9px;height: 9px;background: rgba(13, 222, 156, 1);border-radius: 50%;"></span> <span>${name1}</span> :<span>${value1}</span></div>
                 <div><span style="display: inline-block;width: 9px;height: 9px;background: rgba(255, 215, 37, 1);border-radius: 50%;"></span> <span>${name2}</span> :<span>${value2}</span></div>

`;
           }.bind(this),
         },
         xAxis: {
           type: 'time',
            min: "2023-08-03 00:00:00",
            max: "dataMax",
           splitNumber:7,
           nameGap: 20,
           scale: true,
           // data: this.xAxisData,
           axisLabel: {
             interval: 0, // 设置标签全部显示
             // rotate: 20, // 旋转角度，以适应较长的标签
             textStyle: {
               fontSize: 12, // 设置标签字体大小
             },
             formatter: function (value) {
               // console.log('wwwwww',value)
               var date = new Date(value)
               var h = date.getHours();

               return h + ':00'
             }

           },
           axisTick: {
             show: false,
           },
           axisLine: {
             show: false,
             lineStyle: {
               color: '#4FA6F7', // 设置X轴颜色
             },

           },
         },
         animationDuration: 1500,
         animationEasingUpdate: 'quinticInOut',
         grid: {
           x: '12%',
           width: '83%',
           y: '12%',
           top: "25%",
           left: "13%",

         },
         yAxis: {
           type: 'value',
           name: '工单状态走势图',
           margin: 15, // 调整Y轴边距
           nameTextStyle: {//轴标题，在xAxis或yAxis根下
             color: '#4FA6F7',
             padding: [0, 30, 0, 0],
             fontSize: 12
           },
           splitLine: {show: false},
           axisLine: {
             lineStyle: {
               color: '#4FA6F7', // 设置Y轴颜色
             },
           },
         },
         legend: {
           data: ["正常","异常"],
           orient: 'horizontal', // 图例横着排
           textStyle: {
             color: '#4FA6F7', // 设置图例字的颜色
           },
           padding: [30, 0, 0, 0],
           right: 10, // 距离右边的距离
         },
         series:Dataseries,
       }
       orderChart.setOption(option);
     },

     clear(){
       clearInterval(this.timer);
       this.timer = null;
     }
   },
  beforeUnmount() {
     this.clear()
   }
 }
 </script>
<style scoped lang="scss">
.dv-border-box-7{
  border-radius: 3px;
  position: relative;
  height: 350px;
  .container{
    padding: 10px;
    .title_container{
      position: absolute;
      color: #1CDBFE;
      left: 20px;
      top:20px;
      display: flex;
      align-items: center;
      .title{
        width: 15px;
        height: 28px;
        background: #1CDBFE;
        border-radius: 9px;
        display: inline-block;
      }
      :deep(.tab) .el-radio-group{
        //.el-radio-button{
        //  border: 1px solid #1CDBFE;
        //
        //}
        margin-bottom: 0!important;
        .el-radio-button__inner{
          background:#131C59;
          color: #1CDBFE;
          border: 1px solid #1CDBFE;
        }
         .is-active .el-radio-button__inner{
           background: #1CDBFE;
           color: #FFFFFF;
         }
      }
    }

  }
}
:deep(.dv-border-svg-container) {
  display: none;
}
</style>
<script setup>
</script>
